<script lang="ts" setup>
import {onBeforeUnmount, ref, shallowRef, onMounted} from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {showConfirmDialog, showToast} from 'vant';
import MyAxios from "../../plugins/myAxios.ts";
import {useRoute} from "vue-router";
import {router} from "../../main.ts";

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const route = useRoute()
// 内容 HTML
const valueHtml = ref(<string>route.query.content)

const titleHtml = ref(<string>route.query.title)

// 模拟 ajax 异步获取内容
const pId = ref(<string>route.query.id)



const toolbarConfig = {}



const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor: typeof Editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

// function handleSave() {
//   console.log('handleSave', valueHtml.value)
// }
const offset = ref({ x: 300, y: 500 });

onMounted(() => {
  showToast("修改的时候标题和内容不能为空哦")
})


const onClick = () => {
  showConfirmDialog({
    title: '确定修改您的心得吗？',
  })
      .then(() => {
        MyAxios.post("/post/update",{
          title: titleHtml.value,
          content: valueHtml.value,
          postId: pId.value
        })
            .then(res => {
              if(res.data.code === 40000){
                showToast("标题和内容不能为空！")
              }else{
                showToast("修改成功！")
              }
              console.log(res)
            })
            .catch(() => {
              showToast("修改错误")
            });
      })
      .catch(() => {
        showToast("修改错误")
      });
}
const onClickLeft = () => {
  router.push('/my/post')
}

const mode = 'simple' // 编辑器模式，可选值：default / simple
</script>

<template>
  <div id="building">
    <img src="../../assets/最终返回键.png" class="back-btn" @click="onClickLeft" alt="">
    <div class="title" style="width: 96%; top:20%; position: absolute;z-index: 9999;text-align: center;">
      <input type="text" placeholder="请输入标题" style="width: 100%;" v-model="titleHtml"/>
    </div>
    <div style="border: 1px solid #ccc ; opacity:0.9">
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
      <Editor
          style="height: 500px; overflow-y: hidden;"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
      />
    </div>
  </div>

  <div class="suspension-location">
    <van-floating-bubble
        axis="xy"
        icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/%E6%9C%80%E7%BB%88%E6%B7%BB%E5%8A%A0.png"
        v-model:offset="offset"
        @click="onClick"
    />
  </div>

</template>

<style scoped>
#building {
  background: url("../../assets/最终笔记展示背景.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  opacity: 1;
}

.back-btn {
  position:fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  left:85%;
  z-index:2;
}



</style>